<template>
  <el-breadcrumb separator="/" style="margin-bottom: 15px">
    <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadArr" :key="item">{{
      item
    }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { watch, ref } from "vue";

import { useBannerStore } from "@/stores/banner";
const bannerStore = useBannerStore();

const breadArr = ref<string[]>([]);

const route = useRoute();
watch(
  route,
  (to) => {
    // console.log(to.path);
    bannerStore.menuList.forEach((item) => {
      if (to.path === item.index) {
        breadArr.value = [item.title];
      }
      if (item.children) {
        item.children.forEach((value) => {
          if (to.path === value.index) {
            breadArr.value = [item.title, value.title];
          }
        });
      }
    });
  },
  {
    immediate: true,
  }
);
</script>
